<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
    <script>
        // 公共变量 有没有选择图片
        var file_upload_status = false;
        $(function () {
            layui.use(['table','laytpl'], function(){
                var table = layui.table;
                var laytpl = layui.laytpl;
                table.render({
                    elem: '#deptTable',
                    // 定义 table 的大标题（在文件导出等地方会用到） 不显示
                    title: "上师表",
                    // 使用工具栏
                    toolbar:"#myToolbar",
                    height: 600,
                    //数据接口
                    url: '${pageContext.request.contextPath}/article/showAll',
                    // 开启分页
                    page: true,
                    // 设置分页的属性
                    limit:10,
                    limits:[10,20,30],
                    // 是否显示加载条
                    loading: true,
                    //表头
                    cols: [[
                        // 设置复选框
                        {type: "checkbox"},
                        {field: 'articleId', title: '编号'},
                        {field: 'articleName',title: '文章名字'},
                        {field: 'articleImage', templet:"#articleImageTemplet", title: '图片'},
                        {field: 'articleContent', title: '文章内容'},
                        {field: 'articleDate', title: '文章上传时间'},
                        {field: 'guru', title: '所属上师',templet:'<div>{{d.guru.guruName}}<div>'},
                        { title: '操作',fixed: 'right',templet:"#caoZuo"}
                    ]]
                });
            })


            layui.use(['element','upload','table','layer'], function(){
                var element = layui.element;
                var table = layui.table;
                var layer = layui.layer;
                var $ = layui.jquery,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    //文件上传有自己独立的url
                    ,url: '${pageContext.request.contextPath}/article/insert',
                    data:{
                        //参数携带各式 key：匿名函数
                        articleName:function(){
                            return $('#articleName').val();
                        },
                        articleContent:function(){
                            return $('#articleContent').val();
                        }
                    },
                    // 不让文件上传组件自动上传
                    auto:false,
                    // 绑定提交按钮 让按钮决定什么时候提交
                    bindAction: '#addSubmitBtn',
                    choose: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            // 如果选择修改为ture
                            file_upload_status = true;
                            $('#imgdemo1').attr('src', result); //图片链接（base64）
                        })},done: function(res){
    //如果上传失败
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }else{
                            //上传成功刷新表单
                            //3.刷新table
                            layer.closeAll('page');
                            table.reload("deptTable");
                            $('#imgdemo1').attr('src', '');
                            $('#articleName').val('');
                            $('#articleContent').val('');
                        }
                    }
                });
            });
        });

        function add() {
            console.info("进入点击事件")
            // 1.判断有没有选择图片
            if(!file_upload_status){
                // 2.没有的话 通过ajax提交
                console.info("没有选择图片 可以执行ajax")
                $.ajax({
                    url:"${pageContext.request.contextPath}/article/insert",
                    data:{
                        articleName:$("#articleName").val(),
                        articleContent:$("#articleContent").val(),
                    },
                    success:function (data) {
                        //2.提示修改成功
                        if(data.isInsert){
                            layer.closeAll('page');
                            layer.alert("添加成功",{time:3000});
                        }else{
                            layer.alert("添加失败",{time:3000});
                        }
                    }
                })
            }

        }


        layui.use(["form","layer","table"],function () {
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;


            form.on("submit(update)",function(data){
                console.log(data);
                $.ajax({
                    url:"${pageContext.request.contextPath}/article/update",
                    data:data.field,
                    type:"post",
                    success:function(data){
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll('page');

                        //2.提示修改成功
                        if(data.isUpdate){
                            layer.alert("修改成功",{time:3000});
                        }else{
                            layer.alert("修改失败",{time:3000});
                        }
                        //3.刷新table
                        table.reload("deptTable");
                        $('#imgdemo1').attr('src', '');
                        $('#articleName').val('');
                        $('#articleContent').val('');
                    }
                })
                return false;//阻止跳转；
            })
        })

        function toOpenAddLayer() {
            $("#articleId").val(0);
            $("#articleId_div").css("display","none");
            $("#addSubmitBtn").show();
            $("#updateSubmitBtn").hide();
            layui.use('layer', function(){
                layer.open({
                    title:"添加新轮播图",
                    content:$("#addForm"),
                    type:1
                })
            });
        }


        function toOpenUpdateLayer(articleId) {
            $.ajax({
                url:"${pageContext.request.contextPath}/article/selectOne",
                data:"articleId="+articleId,
                success:function(data){
                    $("#articleId").val(data.articleId);
                    $("#articleName").val(data.articleName);
                    $("#articleContent").val(data.articleContent);
                }
            });
            $("#updateSubmitBtn").show();
            $("#addSubmitBtn").hide();
            //2.
            layui.use('layer', function(){
                layer.open({
                    title:"修改轮播图",
                    content:$("#addForm"),
                    type:1
                })
            });
        }


        function doDelete(articleId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定真的要把我干掉吗？', {icon: 3, title:'确认删除'}, function(index){
                    //do something
                    console.log(articleId)
                    $.ajax({
                        url:"${pageContext.request.contextPath}/article/delete",
                        data:"articleId="+articleId,
                        success:function(data){
                            layer.alert(data.isDelete,{time:2000});
                            table.reload("deptTable");
                            layer.close(index);
                        }
                    })
                });
            });
        }

    </script>
    <script id="articleImageTemplet" type="text/html">
        <img src="${pageContext.request.contextPath}{{= d.articleImage }}" alt="{{= d.articleName }}">
    </script>

    <%--    操作按钮 模板--%>
    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.articleId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="doDelete('{{d.articleId}}')">删除</button>
    </script>
</head>
<body>

    <%--表格展示--%>
    <table id="deptTable" class="layui-table"></table>
    <%--顶部工具栏--%>
    <%--display: none 只在工具栏展示 不在页面显示--%>
    <div id="myToolbar" style="display: none">
        <%--//按钮标签，格式为layui--%>
        <button type="button" class="layui-btn" onclick="toOpenAddLayer()">
            <i class="layui-icon layui-icon-add-circle"></i>
            添加
        </button>
      <%--  <button type="button" class="layui-btn" onclick="doMultiDelete()">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>--%>
    </div>

        <form id="addForm" style="display: none;padding: 15px" class="layui-form" enctype="multipart/form-data">
            <div class="layui-form-item" id="articleId_div">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input name="articleId" id="articleId" class="layui-input" readonly/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章名字</label>
                <div class="layui-input-block">
                    <input name="articleName" id="articleName" class="layui-input" placeholder="请输入文章名字" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择要上传图片</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <input name="articleContent" id="articleContent" class="layui-input" placeholder="" />
                </div>
            </div>
            <div class="layui-form-item">
                <button lay-submit type="button" lay-filter="add" class="layui-btn" onclick="add()" id="addSubmitBtn">添加</button>
                <button lay-submit type="button" lay-filter="update" class="layui-btn" id="updateSubmitBtn">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>

</body>
</html>
